<template>
    <div class="whole">
        <!-- <div class="dia">
			<van-search v-model="agentNo" placeholder="请输入码牌编号" shape="round" :show-action="showAction"
				@search="onSearch" class="search">
			</van-search>
			<div class="" @click="onSearch">
				搜索
			</div>
		</div> -->
        <van-tabs title-active-color="#FF2828" color="#FF2828" @click="tabDitch()" v-model:active="active">
            <van-tab :title="item.channelName" v-for="(item,index) in tabList" :key="index" :name="index" />
        </van-tabs>
        <div class="wrapperCenter">
            <div class="content">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getList">
                    <empty v-if="!list.length"></empty>
                    <div class="dis" v-for="(item,index) in list" :key="index">
                        <div class="main" :class="index!=0?'main_top':''">

                            <div class="main_d">
                                <div class=""
                                    style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
                                    <div class="" style="width: 100%;">
                                        <div class="dia" style="justify-content: space-between;width: 100%;">
                                            <div class="institution">
                                                余额：{{item.accountBalanceAfter}}
                                            </div>
                                            <div class="price">
                                                <div class="price_font">
                                                    <span
                                                        v-if="item.updateType==0">+{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==1">+{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==100">+{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==3">+{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==98">+{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==2">+{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==4">+{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==99">-{{item.accountBalanceUpdate}}</span>
                                                    <span
                                                        v-else-if="item.updateType==101">-{{item.accountBalanceUpdate}}</span>
                                                    <span v-else>-{{item.accountBalanceUpdate}}</span>
                                                </div>
                                                <div class="" style="margin-top: 6px;">
                                                    <span v-if="item.updateType==0">分润入账</span>
                                                    <span v-else-if="item.updateType==1">返现入账</span>
                                                    <span v-else-if="item.updateType==2">出款分润入账</span>
                                                    <span v-else-if="item.updateType==3">政策奖励入账</span>
                                                    <span v-else-if="item.updateType==98">提现退款</span>
                                                    <span v-else-if="item.updateType==99">提现出账</span>
                                                    <span v-else-if="item.updateType==100">调增</span>
                                                    <span v-else-if="item.updateType==101">调减</span>
                                                    <span v-else-if="item.updateType==4">多次SIM卡入账</span>
                                                    <!-- <span v-else>提现出账</span> -->
                                                </div>
                                            </div>
                                        </div>
                                        <div class="dia" style="justify-content: space-between;">
                                            <div class="condition">
                                                订单号：{{item.orderNo}}
                                            </div>
                                            <div class="condition time" style="text-align: right;">
                                                {{item.updateTime}}
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        selectAgentAccountHis
    } from '@/api/terminal'
    import store from '@/store'

    import {
        showToast
    } from 'vant'
    export default defineComponent({
        name: 'sateActive',
        setup() {
            const router = useRoute()
            const routers = useRouter()
            const state = reactive({
                tabList: [{
                    channelName: '收入'
                }, {
                    channelName: '支出'
                }],
                active: 0,
                pageStart: 1,
                pageSize: 20,
                loading: false,
                finished: false,
                list: [],
                channelCode: "",
                updateType: 0
            })
            //获取数据
            const getList = () => {
                state.channelCode = router.query.channelCode
                state.channelName = router.query.accountType
                selectAgentAccountHis({
                    accountType: router.query.accountType,
                    channelCode: router.query.channelCode,
                    pageStart: state.pageStart,
                    pageSize: state.pageSize,
                    updateType: state.updateType
                }).then(res => {
                    if (res.data.records.length != 0) {
                        if (res.data.records.size < 10) {
                            state.finished = true
                            state.loading = false
                        } else {
                            state.pageStart++
                            state.finished = false
                            state.loading = false
                        }
                        state.list = state.list.concat(res.data.records)
                    } else {
                        state.finished = true
                        state.loading = false
                    }
                })
            }
            //获取tab
            const tabDitch = () => {
                state.updateType = state.active
                state.pageStart = 1
                state.list = []
                getList()
            }
            return {
                ...toRefs(state),
                getList,
                tabDitch
            }
        }
    })
</script>
<style scoped lang="scss">
    .whole {
        height: 100vh;
        background-color: #fff;
        overflow-y: auto;

        .search {
            width: 328px;
            // position: fixed;
            // top: 0;
        }

        .wrapperCenter {
            height: 100vh;
            overflow: scroll;

            .content {

                // padding-bottom:50px;
                // box-sizing: border-box;
                .main {
                    width: 339px;
                    // height: 144px;
                    background: #FFFFFF;
                    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
                    border-radius: 6px;
                    padding: 10px 10px;
                    box-sizing: border-box;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 12px;
                    color: #333333;
                    margin-top: 12px;

                    .price {
                        font-size: 12px;
                        color: #cccccc;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        justify-content: center;
                    }

                    .price_font {
                        color: red;
                        font-size: 14px;
                    }

                    .main_d {
                        // width: 280px;
                        display: flex;
                        justify-content: space-between;
                    }

                    .time {
                        font-size: 12px;
                        color: #cccccc;
                    }

                    .institution {
                        margin-top: 2px;
                        margin-left: 12px;

                    }

                    .condition {
                        margin-top: 12px;
                        margin-left: 12px;
                    }
                }
            }
        }

        // .wrapperBottom {
        // 	padding: 14px;
        // 	position: fixed;
        // 	width: 100%;
        // 	bottom: 0;
        // 	background: #ffffff;
        // 	opacity: 1;
        // 	border-radius: 0px;
        // 	display: flex;
        // 	justify-content: space-between;

        // 	.left {
        // 		display: flex;
        // 		align-items: center;
        // 	}

        // 	.right {
        // 		// width: 73px;
        // 		// height: 21px;
        // 		background: #2687FF;
        // 		border-radius: 14px;
        // 		padding: 6px 8px;
        // 		opacity: 1;
        // 		display: flex;
        // 		align-items: center;
        // 		justify-content: center;
        // 		font-size: 12px;
        // 		color: #ffffff;
        // 		// border-radius: 5px;
        // 	}
        // }
    }

    ::v-deep .van-search__content {
        background-color: #EDF5FF !important;
    }
</style>